/*
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2022-12-22 10:57:11
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-11-09 10:38:59
 * @FilePath: \cxl-admin\src\utils\basc-data.ts
 */
import { searchItemInterface } from '@/components/search'
import { userStore } from '@/store/user.store'
import { reactive, ref } from 'vue'

interface dynamicProp {
    [name: string]: string
}

//判断操作按钮显示的条件类型
export interface visibleType {
    property: string //属性
    condition: string //条件 > >= == === !== != <= <
    value: number | string //值
}
//操作属性类型
export interface operationType {
    type?: string //类型
    visible?: boolean | visibleType //
    permission?: string[] //全选
    className?: string //class名称
    name?: string //按钮名称
}
export interface headerOperationType extends operationType {
    button?: string //是否是按钮 button | radio-button
    modelValue?: string //radio-button 默认值
    radioGroup?: string[] //radio-button 选项值
}

//定义表格描述的接口
export interface DescribeInterface {
    prop?: string //根据接口返回的属性定义
    label?: string //根据接口返回的属性实现该属性的名字
    switch?: boolean //是否是滑块按钮
    operation: operationType[] //操作栏
    width?: string //操作栏的宽度
    children?: DescribeInterface[] //表格header字段
}

//定义提示接口
interface tooltipInterface {
    visible: boolean //提示是否显示 默认false
    content: string //提示内容
}

//定义switch类型接口
export interface SwitchInterface {
    disabled: boolean //滑块是否禁用 默认flase
    permission: string[] //滑块权限
    tooltip: tooltipInterface //滑块鼠标移上去提示内容
}

//表格数据接口
export interface DataInterface {
    data: any[] //表格数据
    describe: DescribeInterface[] //表格header字段
    selection: boolean //是否是可选 默认不显示
    index: boolean //是否显示序号 默认不显示
    showSummary: boolean //是否显示底部统计栏 默认不显示
    summaryArray: any[] //统计栏数据
    summaryType: string //统计类型 consumeCollect | consumeDetailed | topUpCollectSuperAdmin | topUpCollect | topUpDetailed | reconciliationCollectSuperAdmin | reconciliationDetailed
    sortable: any[] //设置prop栏是否可排序
    isDialog: boolean //是否是弹窗  默认不是
    switch: SwitchInterface //定义存在滑块操作类型
}
//分页属性类型
interface paginationInterface {
    pageNo: number
    pageSize: number
    total: number
}

//pageData类型
export interface pageDataInterface {
    headerOperation: headerOperationType[] // 搜索与表格之间的操作按钮 button | radio-button 两种
    permission: string[] //查询表格和显示顶部搜索的权限
    pagination: paginationInterface //分页
    table: DataInterface //表格数据
    search: Array<searchItemInterface | string | string[]> //需要搜索的属性
}

//需要实现的基本方法
export interface BaseMethod {
    getData(arg?: any): void //获取数据
    onSearch(arg?: any): void //点击搜索
    onReset(arg?: any): void //点击重置搜索
    onPaginationChange(arg?: any): void //监听分页改变
    onPaginationSize(arg?: any): void //监听分页大小改变
    onOperation(arg?: any): void //监听表格操作按钮
}

export class BaseData {
    //用户仓库信息
    uStore = userStore()
    //整个页面的数据结构
    pageData = reactive<pageDataInterface>({
        headerOperation: [],
        permission: [],
        pagination: {
            pageNo: 1,
            pageSize: 20,
            total: 0
        },
        table: {
            data: [],
            describe: [],
            summaryArray: [],
            summaryType: '',
            sortable: [],
            showSummary: false,
            selection: false,
            index: false,
            isDialog: false,
            switch: {
                disabled: false,
                permission: [],
                tooltip: {
                    visible: false,
                    content: ''
                }
            }
        },
        search: []
    })

    //接收传递的表格name
    propName: any
    //是否有操作栏
    operation: operationType[] = []
    //表格操作栏的宽度
    operationWidth = '120px'
    //搜索与表格之间的操作按钮
    headerOperation: operationType[] = reactive([])
    //搜索及表格查询
    permission: string[] = reactive([])

    oDate = new Date()
    currentYear = ref(this.oDate.getFullYear())
    currentMonth = ref(this.oDate.getMonth() + 1) //取当月
    currentDate = ref(this.oDate.getDate()) //取今日
    fromTo: any[] = reactive([
        this.currentYear.value +
            '-' +
            (this.currentMonth.value >= 10 ? this.currentMonth.value : `0${this.currentMonth.value}`) +
            '-01',
        this.currentYear.value +
            '-' +
            (this.currentMonth.value >= 10 ? this.currentMonth.value : `0${this.currentMonth.value}`) +
            '-' +
            (this.currentDate.value >= 10 ? this.currentDate.value : `0${this.currentDate.value}`)
    ])

    resetDate = () => {
        this.fromTo = [
            this.currentYear.value +
                '-' +
                (this.currentMonth.value >= 10 ? this.currentMonth.value : `0${this.currentMonth.value}`) +
                '-01',
            this.currentYear.value +
                '-' +
                (this.currentMonth.value >= 10 ? this.currentMonth.value : `0${this.currentMonth.value}`) +
                '-' +
                (this.currentDate.value >= 10 ? this.currentDate.value : `0${this.currentDate.value}`)
        ]

        this.fromTo[0] = '2023-01-01'
    }

    /**
     * 构造器
     * @param propName 表格字段
     * @param operation 操作类型
     * @param width 操作栏宽度 120
     */
    constructor(tableConfig: any) {
        this.fromTo[0] = '2023-01-01'

        this.propName = tableConfig.table.propName

        this.operation.length = 0
        this.operation.push(...(tableConfig.table.operation || []))

        this.operationWidth = tableConfig.table.operationWidth || '120px'

        this.pageData.search.length = 0
        this.pageData.search.push(...(tableConfig.search || []))

        this.pageData.table.showSummary = tableConfig.table.showSummary || false
        this.pageData.table.selection = tableConfig.table.selection || false
        this.pageData.table.index = tableConfig.table.index || false
        this.pageData.table.isDialog = tableConfig.table.isDialog || false
        this.pageData.table.summaryType = tableConfig.table.summaryType || ''
        this.pageData.table.summaryArray.length = 0
        this.pageData.table.summaryArray.push(...(tableConfig.table.summaryArray || []))
        this.pageData.table.sortable.length = 0
        this.pageData.table.sortable.push(...(tableConfig.table.sortable || []))

        this.pageData.table.switch.permission.length = 0
        this.pageData.table.switch.permission.push(...(tableConfig.table.switch.permission || []))
        this.pageData.table.switch.tooltip.visible = tableConfig.table.switch.tooltip.visible || false
        this.pageData.table.switch.tooltip.content = tableConfig.table.switch.tooltip.content || ''

        this.pageData.permission.length = 0
        this.pageData.permission.push(...(tableConfig.permission || []))

        this.pageData.headerOperation.length = 0
        this.pageData.headerOperation.push(...(tableConfig.headerOperation || []))

        this.createTablePropName()
    }

    /**
     * 根据传递的 propName 构建 表格需要显示的字段名称
     */
    createTablePropName() {
        this.pageData.table.describe.length = 0
        for (const key in this.propName) {
            // console.log('key', this.propName[key], Object.prototype.toString.call(this.propName[key]))
            if (Object.prototype.toString.call(this.propName[key]) === '[object Object]') {
                // 多级表头
                const child: DescribeInterface[] = []
                if (this.propName[key].children) {
                    this.propName[key].children.forEach((item: any) => {
                        for (const k in item) {
                            child.push({
                                prop: k,
                                label: item[k as string],
                                switch: k == 'status' ? true : false,
                                operation: [],
                                width: this.setTablePropWidth(k),
                                children: []
                            })
                        }
                    })
                }
                this.pageData.table.describe.push({
                    label: this.propName[key].label,
                    switch: false,
                    operation: [],
                    width: '',
                    children: child
                })
            } else {
                //普通的表头
                this.pageData.table.describe.push({
                    prop: key,
                    label: this.propName[key],
                    switch: key == 'status' ? true : false,
                    operation: [],
                    width: this.setTablePropWidth(key),
                    children: []
                })
            }
        }
        if (this.operation.length) {
            this.pageData.table.describe.push({
                prop: '操作',
                label: '操作',
                switch: false,
                width: this.operationWidth,
                operation: [...this.operation],
                children: []
            })
        }
    }
    resetPagination() {
        this.pageData.pagination.pageNo = 1
        this.pageData.pagination.pageSize = 20
        this.pageData.pagination.total = 0
    }

    //设置表格头prop的宽度
    setTablePropWidth(key: string) {
        //表头的字段
        const arr: dynamicProp = {
            customerName: '200px',
            fromTo: '200px',
            submitTime: '200px',
            companyName: '220px',
            companyCode: '220px',
            customerNo: '160px',
            phone: '160px'
        }
        return arr[key]
    }
}
